

import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router'
import dplayer from "dplayer"
import { getshowVideo, getshowVideoAddr, httpGetVideoById, httpGetVideoCommentList } from '../apis';
import ShowVideoInput from '../components/ShowVideo/ShowVideoInput';
import ShowVideoComments from '../components/ShowVideo/ShowVideoComments';
import "./ShowVideo.scss";
import ShowVideoLikes from '../components/ShowVideo/ShowVideoLikes';

export default function ShowVideo() {
    const location = useLocation();
    const [videoList,setVideoList] = useState([]);
    const [refresh,setRefresh] = useState(false);
    const videoId = location.state.video.videoId;
    const [video,setVideo] = useState(location.state.video);
    useEffect(()=>{
        async function getVideoById() {
            let data = {};
            data.videoId = videoId;
            let res = await httpGetVideoById(data);
            console.log(res);
            setVideo(res);
        }
        getVideoById();
    },[]);
    useEffect(()=>{
        async function initVideo() {
            if(!video.videoName)return ;
            const data = {};
            data.videoId = video.videoId;
            const url = await getshowVideoAddr(data);
            const dp = new dplayer({
                container: document.getElementById('videoContainer'),
                screenshot: true,
                video: {
                    url: url,
                    pic: video.coverURL,
                },
            });
        }
        initVideo();
    },[video]);

    useEffect(()=>{
        refresh && setRefresh(false);
    },[refresh]);


    useEffect(()=>{
        async function getList() {
            let data = {};
            data.videoId = video.videoId;
            let res = await httpGetVideoCommentList(data);
            setVideoList(res);
        }
        getList();
    },[video,refresh]);




    return (
        <div className='ShowVideo-container'>
            <div>
                <h1>{video.videoName}</h1>
                <div className='LiveRoomVideo-container' style={
                        {
                            height: "400px",
                        }
                    }>
                    <div id="videoContainer" ></div>
                </div>
                <ShowVideoLikes video={video}></ShowVideoLikes>
                <ShowVideoInput video={video} setRefresh={setRefresh}></ShowVideoInput>
                <ShowVideoComments list={videoList}></ShowVideoComments>
            </div>
        </div>
    )
}
